import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import Tooltip from "components/Tooltip";
import Button from "components/Button";

<Meta title="Components/Tooltip" component={Tooltip} />

# Tooltip

## Props

<Props of={Tooltip} />

## Examples

### Basic

Basic usages for ``Tooltip`` component.

<Preview>
  <Story name="basic tooltip">
    <div style={{ textAlign: "center", padding: 40 }}>
      <Tooltip content="Kube Design" placement="left">
        <Button>Left</Button>
      </Tooltip>
      <Tooltip content="Kube Design">
        <Button>Top</Button>
      </Tooltip>
      <Tooltip content="Kube Design" placement="bottom">
        <Button>Bottom</Button>
      </Tooltip>
      <Tooltip content="Kube Design" placement="right">
        <Button>Right</Button>
      </Tooltip>
    </div>
  </Story>
</Preview>
